<template>
  <div class="index">
      <main>
          <router-view></router-view>
      </main>
      <footer>
          <router-link to="/page"><span><a-icon type="bank" /></span><span>首页</span></router-link>
          <router-link to='/looking'><span><a-icon type="snippets" /></span><span>找房</span></router-link>
          <router-link to="/issue"><span><a-icon type="plus-circle" /></span><span>发布</span></router-link>
          <router-link to='/news'><span><a-icon type="message" /></span><span>消息</span></router-link>
          <router-link to='/my'><span><a-icon type="user" /></span><span>我的</span></router-link>
      </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.index{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

main{
    flex: 1;
    overflow-y: auto;
}
footer{
    height:50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 40px;
    border-top: 1px solid #cccccc;
}
footer a{
    text-align: center;
    color: #cccccc;
}
footer a span{
    display: block;
}
footer a.router-link-active{
    color: lightcoral;
}
</style>